<template>
  <div class="release_House">
    <van-nav-bar title="发布房源" left-arrow @click-left="$router.go(-1)" />
    <van-cell-group>
      <van-cell value="房源信息" />
      <van-cell
        title="小区名称"
        :value="areaName"
        is-link
        @click="goSearch"
        to="/searchCommunity"
      />
      <van-field
        v-model="form.price"
        label-align="left"
        label="租金"
        placeholder="请输入租金/月"
      >
        <template #extra>
          <span>￥/月</span>
        </template>
      </van-field>
      <van-field
        v-model="form.size"
        label="建筑面积"
        placeholder="请输入建筑面积"
      >
        <template #extra>
          <span>m²</span>
        </template>
      </van-field>
      <van-cell
        title="户型"
        :value="form.roomType"
        is-link
        @click="showType = true"
      />
      <van-cell
        title="所在楼层"
        :value="form.floor"
        is-link
        @click="showFloor = true"
      />
      <van-cell
        title="朝向"
        :value="form.oriented"
        is-link
        @click="showOriented = true"
      />
      <van-cell value="房屋标题" />
      <van-field
        v-model="form.title"
        type="textarea"
        placeholder="请输入标题 (例如：整租 小区名 2室 5000元)"
      />
      <van-cell value="房屋图像" />
      <van-uploader :after-read="afterRead" />
      <van-cell value="房屋配置" />
      <van-field v-model="form.supporting" type="textarea" placeholder="TODO" />
      <van-cell value="房屋描述" />
      <van-field
        v-model="form.description"
        type="textarea"
        maxlength="100"
        size="large"
        placeholder="请输入房屋描述信息"
      />
      <van-tabbar>
        <van-tabbar-item>取消</van-tabbar-item>
        <van-tabbar-item class="submit" @click="submitInfo()"
          ><span>提交</span></van-tabbar-item
        >
      </van-tabbar>
    </van-cell-group>

    <van-popup v-model="showType" position="bottom" :style="{ height: '40%' }">
      <van-picker
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="onCancel"
      />
    </van-popup>
    <van-popup v-model="showFloor" position="bottom" :style="{ height: '40%' }">
      <van-picker
        show-toolbar
        :columns="columnsFloor"
        @confirm="onConfirm"
        @cancel="onCancel"
      />
    </van-popup>
    <van-popup
      v-model="showOriented"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <van-picker
        show-toolbar
        :columns="columnsOriented"
        @confirm="onConfirm"
        @cancel="onCancel"
      />
    </van-popup>
  </div>
</template>
<script>
import { releaseHouses } from '@/api/user'
export default {
  name: 'release_housing',
  data () {
    return {
      areaName: this.$route.query.name || '请输入小区名称',
      cityID: this.$route.query.cityId,
      chooseOption: '请选择',
      showType: false,
      showOriented: false,
      showFloor: false,
      columns: ['一室', '二室', '三室', '四室', '四室+'],
      columnsFloor: ['高楼层', '中楼层', '低楼层'],
      columnsOriented: ['东', '西', '南', '北', '东南', '东北', '西南', '西北'],
      form: {
        price: '',
        title: '',
        supporting: '',
        size: '',
        roomType: '',
        floor: '',
        community: '',
        description: '',
        houseImg: '',
        oriented: ''
      }
    }
  },
  methods: {
    //发布房源
    async submitInfo () {
      try {
        await releaseHouses(this.form)
        this.$toast.success('发布成功！')
      } catch (error) {
        console.log(error)
      }
    },
    goSearch () {
      this.$router.push({
        path: '/searchCommunity',
        query: {
          cityId: this.cityID
        }
      })
    },
    //获取上传的图片信息
    afterRead (file) {
      // 此时可以自行将文件上传至服务器
      this.form.houseImg = file
    },
    onConfirm (value) {
      if (this.showType) {
        this.form.roomType = value
        this.showType = false
      } else if (this.showFloor) {
        this.form.floor = value
        this.showFloor = false
      } else if (this.showOriented) {
        this.form.oriented = value
        this.showOriented = false
      }
    },
    onCancel () {
      this.showType = false
      this.showFloor = false
      this.showOriented = false
    }
  },
  computed: {},
  created () {}
}
</script>
<style lang="less" scoped>
.van-bar {
  em {
    color: #999;
  }
}
.van-tabbar-item {
  font-size: 15px;
}
/deep/.submit {
  background-color: #21b97a;
  color: #fff;
}

.van-field {
  span {
    color: #999;
  }
}
/deep/.van-uploader__input {
  padding: 10px 10px;
}
/deep/.van-nav-bar__content {
  background-color: #21b97a;

  .van-nav-bar__title {
    color: #fff;
    font-size: 18px;
  }
  .van-icon-arrow-left {
    color: #fff;
  }
}
</style>
